<template>
	<view>
		<view v-for="(item,index) in txl" :key="index" class="contact">
			<view class="info">
				<div class="info-text">
					<p>{{txl[index].name}}</p>
					<li><img style="width: auto; height: auto; max-width: 15%; max-height:15%;"
							src="../../static/gps.png" alt="">
						<span>位置:{{txl[index].addr}}</span>
					</li>

					<li><img style="width: auto; height: auto; max-width:15%; max-height:15%;" src="../../static/ph.png"
							alt="">
						<span>联系电话:{{txl[index].phone}}</span>
					</li>

				</div>
			</view>
			<view class="btn">
				<button>联系</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				txl: [],
				location: '',
				phone: ''
			}
		},
		mounted() {
			uni.request({
				url: 'http://192.168.100.75:9090/sl-user/getContact', //分公司接口地址
				method: 'GET',
				success: (res) => {
					console.log(res)
					this.txl = res.data.data
				},
				fail: (res) => {
					console.log(res)
				}
			})
		},
		onload() {

		},
		methods: {

		}
	}
</script>

<style scoped>
	* {
		margin: 0;
	}

	.contact {
		width: 86%;
		margin-left: 4%;
		background-image: linear-gradient(to top, #e7f0fd 0%, #accbee 100%);
		margin-top: 3%;
		margin-bottom: 4%;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px;
	}

	.info {
		height: 100%;
		display: flex;
		flex-direction: column;
		width: 60%;
	}

	.info-text {
		height: 100%;
		width: auto;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	li {
		align-items: center;
		display: flex;
	}

	span {
		margin-left: 5%;
		display: block;
		word-break: keep-all;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
		-icab-text-overflow: ellipsis;
		-khtml-text-overflow: ellipsis;
		-moz-text-overflow: ellipsis;
		-webkit-text-overflow: ellipsis;
	}

	.btn {
		height: 50%;
		width: 30%;
		display: flex;
		align-items: center;
	}
</style>